<div class="zipContainer">
    <div *ngIf="!isLoading;else elseLoadingTemplate">
        <table class="entryTable" *ngIf="!error;else elseErrorTemplate" border="1">
          <tr>
            <td>名 称</td>
            <td align="center" width="150px" nowrap>日 期</td>
            <td align="center" width="140px" nowrap>压缩后大小(bytes)</td>
          </tr>
          <tr *ngFor="let entry of entries" (dblclick)="openEntry(entry)">
            <td title="{{entry.name}}">
              <div class="entryName">
                  <div style="display:inline-block;">
                      <img src="{{getEntryImage(entry)}}" onerror ="this.src='./assets/files/common.png'" width="24" height="24">
                  </div>
                  <div style="display:inline-block;width:100%; margin-left: -24px; padding-left:28px; ">
                      <div class="noWrapContent">
                          {{getEntryDisplayName(entry)}}
                      </div>
                  </div>
              </div>
            </td>
            <td align="center">
              {{entry.date | date:"yyyy-MM-dd HH:mm:ss"}}
            </td>
            <td title="{{entry._data.compressedSize}} bytes">
              <div class="noWrapContent" *ngIf="!entry.dir">
                  {{entry._data.compressedSize}}
              </div>
              <div class="noWrapContent" *ngIf="entry.dir">
                  -
              </div>
            </td>
          </tr>
          <tr *ngIf="!entries || entries.length === 0">
            <td colspan="3">
              此路径下没有文件
            </td>
          </tr>
        </table>
        <ng-template #elseErrorTemplate>
          <div class="error">
            <div class="errorText">
              {{error}}
            </div>
          </div>
        </ng-template>
    </div>
    <ng-template #elseLoadingTemplate>
      <div style="width:100%;height: 60%; display:flex;justify-content:center;align-items:center;">
        <div class="loadingImage">&nbsp;</div>
      </div>
    </ng-template>
    <app-dialog [isVisible] = "previewImagePath || previewVideoPath || previewText" container="content">
      <ng-container *ngIf="previewImagePath">
        <app-imageview [imageUri]="previewImagePath" (whenCloseViewer)="onCloseViewer()"></app-imageview>            
      </ng-container>
      <ng-container *ngIf="previewVideoPath">
        <app-videoview [videoUri]="previewVideoPath" (whenCloseViewer)="onCloseViewer()"></app-videoview>            
      </ng-container>
      <ng-container *ngIf="previewText">
          <app-textview [content]="previewText" (whenCloseViewer)="onCloseViewer()"></app-textview>            
      </ng-container>
  </app-dialog>
</div>

